import React from 'react';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { Box, Text } from '@nova-hf/ui';
import { IContext } from 'beta/typings/context';
import { useTranslation } from 'beta/utils/i18n';
import InternetServiceList from 'beta/containers/service-list/InternetServiceList';

type AddInternetProps = {
  customerId: string;
  contractId: string;
};

const COLOR = 'orange';

const AddInternet = ({ customerId, contractId }: AddInternetProps) => {
  const { t } = useTranslation('alltSaman');
  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/askriftir/${contractId}`}
      title={t('alltSaman.addInternet')}
      subTitle={t('alltSaman.title')}
      icon="internet"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('alltSaman.infoAnd')}
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/alltsaman/spurningar" target="__blank">
              {t('alltSaman.questions')}
            </a>
          </Text>
        </Box>
      }
    >
      <InternetServiceList />
    </StepWrapper>
  );
};

AddInternet.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    contractId: query.contractId,
    namespacesRequired: ['alltSaman'],
  };
};

export default AddInternet;